﻿@page "/docs/components/date-picker"

<Seo Canonical="/docs/components/date-picker" Title="Blazorise DatePicker component" Description="DatePicker is a fully featured date selection component that lets users select a date." />

<DocsPageTitle>
    DatePicker component
</DocsPageTitle>

<DocsPageParagraph>
    <Code Tag>DatePicker</Code> is a fully featured date selection component that lets users select a date.
    <Code>DatePicker</Code> is based on a <Blazorise.Link To="https://flatpickr.js.org/">flatpickr</Blazorise.Link> datetime picker
    and as such is not a native date input element. That means that unlike <code>DateEdit</code> which will render <Code>type="date"</Code>,
    <Code>DatePicker</Code> will render <Code>type="text"</Code> in the DOM.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicDatePickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicDatePickerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Add icon">
        To add icon you can combine <Code>DatePicker</Code> with an <Code>Addon</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DatePickerWithIconExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DatePickerWithIconExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Disable dates">
        If you’d like to make certain dates unavailable for selection you can assign the <Code>DisabledDates</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DatePickerDisabledDatesExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DatePickerDisabledDatesExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Format
</DocsPageSubtitle>

<DocsPageParagraph>
    Native Flatpickr component has some special rules regarding the date format string. To make it easier to use we
    tried to map the flatpickr custom formatter to behave as close to <Strong>.Net</Strong> date format string. Bellow you can find
    the list of available and supported mappings between Blazorise and flatpickr.
</DocsPageParagraph>

<Table>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
            <TableHeaderCell TextAlignment="TextAlignment.Center">.Net value</TableHeaderCell>
            <TableHeaderCell TextAlignment="TextAlignment.Center">Flatpickr value</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">d</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">j</TableRowCell>
            <TableRowCell>Day of the month without leading zeros, 1 to 31.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">dd</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">d</TableRowCell>
            <TableRowCell>Day of the month, 2 digits with leading zeros, 01 to 31.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">ddd</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">D</TableRowCell>
            <TableRowCell>A textual representation of a day, Mon through Sun.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">dddd</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">l</TableRowCell>
            <TableRowCell>A full textual representation of the day of the week, Sunday through Saturday.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">M</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">n</TableRowCell>
            <TableRowCell>Numeric representation of a month, without leading zeros, 1 through 12.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">MM</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">m</TableRowCell>
            <TableRowCell>Numeric representation of a month, with leading zero, 01 through 12.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">MMM</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">M</TableRowCell>
            <TableRowCell>A short textual representation of a month, Jan through Dec.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">MMMM</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">F</TableRowCell>
            <TableRowCell>A full textual representation of a month, January through December.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">y</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">y</TableRowCell>
            <TableRowCell>A two digit representation of a year. 99 or 03.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">yy</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">y</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">yyy</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">Y</TableRowCell>
            <TableRowCell>A full numeric representation of a year, 4 digits, 1999 or 2003.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">yyyy</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">Y</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">yyyy</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">Y</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">H</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">H</TableRowCell>
            <TableRowCell>Hours (24 hours), 00 to 23.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">HH</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">H</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">h</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">h</TableRowCell>
            <TableRowCell>Hours, 1 to 12.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">hh</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">G</TableRowCell>
            <TableRowCell>Hours, 2 digits with leading zeros, 01 to 12.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">m</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">i</TableRowCell>
            <TableRowCell>Minutes, 00 to 59.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">mm</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">i</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">s</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">s</TableRowCell>
            <TableRowCell>Seconds, 0, 1 to 59.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">ss</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">S</TableRowCell>
            <TableRowCell>Seconds, 2 digits, 00 to 59.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">t</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">K</TableRowCell>
            <TableRowCell>AM/PM designator.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell TextAlignment="TextAlignment.Center">tt</TableRowCell>
            <TableRowCell TextAlignment="TextAlignment.Center">K</TableRowCell>
            <TableRowCell>-||-</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Date" Type="TValue" Default="default">
        Gets or sets the input date value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DateChanged" Type="@("EventCallback<TValue>")">
        Occurs when the date has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InputMode" Type="DateInputMode" Default="Date">
        Hints at the type of data that might be entered by the user while editing the element or its contents.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="DateTimeOffset?" Default="null">
        The earliest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="DateTimeOffset?" Default="null">
        The latest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty date.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Step" Type="int" Default="1">
        The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field.
    </DocsAttributesItem>
    <DocsAttributesItem Name="FirstDayOfWeek" Type="DayOfWeek" Default="Sunday">
        Defines the first day of the week in the calendar.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DisplayFormat" Type="string" Default="null">
        Defines the display format of the date input.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TimeAs24hr" Type="bool" Default="false">
        Displays time picker in 24 hour mode without AM/PM selection when enabled.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DisabledDates" Type="IEnumerable<TValue>" Default="null">
        List of disabled dates that the user should not be able to pick.
    </DocsAttributesItem>
</DocsAttributes>